<template>
	<scroll-view
		:scroll-x="true" 
		:scroll-with-animation="true"
		class="biwan__scroll-view"
		:show-scrollbar="false" 
	>	
		<view class=" u-flex u-flex-start u-padding-left-10">
		
			<view v-for="(item,index) in biwanPage" :key="index" class="item">
				<up-image :src="item.cover" width="150" height="120" radius="4"  :fade="false" >
					<template #error>
						 <up-image :src="ee.wxapp.photoface" width="150"
						 height="120" radius="4" ></up-image>						 
					</template> 
				</up-image>
				<view class="mask"> </view>
				<view class="title" @click="ee.jumpto('/pages/single/index?id='+ item.id, 0)">
					<view><text class="font-size14">{{item.title}}</text></view>
					<view><text class="font-size11">{{item.sub_title}}</text></view>
				</view>
			</view>
			 
		
		</view>
	<!-- 滚动必玩项目 -->
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onActivated,
		watchEffect,
		provide,
		nextTick
	} from 'vue';
	
	
	const props = defineProps( {
			biwanPage :{
				type: [Array, Object]
			}
	})	
</script>

<style lang="scss">
	.item {
		position: relative;
		margin-right: 20px;
		 
		
		.mask, .title{
			color: #fff;
			height: 45px;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}
		.mask{
			background-color: #000;
			opacity: .5;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
		.title{
			padding-left: 5px;
			padding-right: 5px;
		}
	}
 
</style>